import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { message } from 'antd'
import ScriptManagerMain from '@/components/ScriptManager/ScriptManagerMain'
import { Script } from '@/types/script'

const ScriptManager: React.FC = () => {
  const navigate = useNavigate()
  const [selectedScriptId, setSelectedScriptId] = useState<string>()

  // 处理脚本选择
  const handleScriptSelect = (script: Script) => {
    setSelectedScriptId(script.id)
    // 可以在这里添加其他逻辑，比如在右侧面板显示脚本详情
  }

  // 处理脚本执行
  const handleScriptExecute = (script: Script) => {
    // 导航到脚本编辑器页面并执行脚本
    navigate(`/editor/${script.id}`, { 
      state: { 
        script,
        autoExecute: true 
      } 
    })
    message.info(`正在执行脚本: ${script.name}`)
  }

  return (
    <div style={{ 
      height: '100vh', 
      padding: '16px',
      background: '#f5f5f5',
    }}>
      <ScriptManagerMain
        onScriptSelect={handleScriptSelect}
        onScriptExecute={handleScriptExecute}
        selectedScriptId={selectedScriptId}
      />
    </div>
  )
}

export default ScriptManager